<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Position的fixed的应用</title>
  <style>
    #top,#bottom {
      width: 1000px;
      height: 120px;
      background:#aaa;
    }
    #toUp {
      position: fixed;
      right: 30px;
      top:20%;
    }
    #toBottom {
      position: fixed;
      right: 30px;
      bottom:20%;
    }
  </style>
</head>
<body>
  <div id="toUp">
    <a href="#top">到顶部</a>
  </div>
  <div id="toBottom">
    <a href="#bottom">到底部</a>
  </div>
  <div id="top">
    顶部信息
  </div>
  <div id="content">
    <p>内容信息01</p>
    <p>内容信息02</p>
    <p>内容信息03</p>
    <p>内容信息04</p>
    <p>内容信息05</p>
    <p>内容信息06</p>
    <p>内容信息07</p>
    <p>内容信息08</p>
    <p>内容信息09</p>
    <p>内容信息10</p>
    <p>内容信息11</p>
    <p>内容信息12</p>
    <p>内容信息13</p>
    <p>内容信息14</p>
    <p>内容信息15</p>
    <p>内容信息16</p>
    <p>内容信息17</p>
    <p>内容信息18</p>
    <p>内容信息19</p>
    <p>内容信息20</p>
    <p>内容信息21</p>
    <p>内容信息22</p>
    <p>内容信息23</p>
    <p>内容信息24</p>
    <p>内容信息25</p>
    <p>内容信息26</p>
    <p>内容信息27</p>
    <p>内容信息28</p>
    <p>内容信息29</p>
    <p>内容信息30</p>
    <p>内容信息31</p>
    <p>内容信息32</p>
    <p>内容信息33</p>
    <p>内容信息34</p>
    <p>内容信息35</p>
    <p>内容信息36</p>
    <p>内容信息37</p>
    <p>内容信息38</p>
    <p>内容信息39</p>
    <p>内容信息40</p>
    <p>内容信息41</p>
    <p>内容信息42</p>
    <p>内容信息43</p>
    <p>内容信息44</p>
    <p>内容信息45</p>
    <p>内容信息46</p>
    <p>内容信息47</p>
    <p>内容信息48</p>
    <p>内容信息49</p>
    <p>内容信息50</p>
    <p>内容信息51</p>
    <p>内容信息52</p>
    <p>内容信息53</p>
    <p>内容信息54</p>
    <p>内容信息55</p>
    <p>内容信息56</p>
    <p>内容信息57</p>
    <p>内容信息58</p>
    <p>内容信息59</p>
    <p>内容信息60</p>
  </div>
  <div id="bottom">
    结尾信息
  </div>
</body>
</html>